<template>
	<view class="hot-rent-list-box">
		<view class="header">
			<view class="left">
				<view class="icon"></view>
				<view class="title">
					热租榜单
				</view>
				<view class="shu">
					|
				</view>
				<view class="text">
					超值超划算
				</view>
			</view>
			<view class="right">
				更多好货 >
			</view>
		</view>
		<view class="list">
			<view class="listBox">
				<view class="loadingBox" v-if="hotList.length==0">
					<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
				</view>
				<view class="list-item" v-else v-for="(item,index) in hotList" :key="index"
					@click="goDetail(item,index)">
					<view class="img"
						:style="{ backgroundImage: 'url(https://api.jingkakeji.com/' + item.images[0] + ')' }">
						<view class="tag" v-if="index==0" style="background-color: #FFB32B ;">
							{{index+1}}
						</view>
						<view class="tag" v-else-if="index==1" style="background-color: #899BAC ;">
							{{index+1}}
						</view>
						<view class="tag" v-else-if="index==2" style="background-color: #E08949  ;">
							{{index+1}}
						</view>
						<view class="tag" v-else>
							{{index+1}}
						</view>
						<view class="firstMonth">
							首月1元
						</view>
					</view>
					<view class="title">
						{{item.name}}
					</view>
					<view class="new-price">
						￥{{item.min_price}}/天
					</view>
					<view class="old-price">
						￥{{item.origin_price}}/天
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Page
	} from '../../api/api.js'
	export default {
		props: ['hotList'],
		data() {
			return {}
		},
		methods: {
			goDetail(item, index) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hot-rent-list-box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;

		.header {
			width: 100%;
			height: 70rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: linear-gradient(0deg, rgba(255, 255, 255, 1) 14%, rgba(255, 250, 198, 1) 100%);
			padding-top: 20rpx;

			.left {
				display: flex;
				align-items: center;
				margin-left: 5%;

				.icon {
					width: 30rpx;
					height: 30rpx;
					background-image: url("/static/index/hot_icon.png");
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
				}

				.title {
					font-size: 34rpx;
					font-weight: bold;
					margin-left: 20rpx;
				}

				.shu {
					margin-left: 20rpx;
					color: #999999;
				}

				.text {
					margin-left: 20rpx;
					color: #999999;
					font-size: 28rpx;
				}
			}

			.right {
				width: 145rpx;
				height: 45rpx;
				margin-right: 5%;
				line-height: 45rpx;
				background-color: #F26662;
				text-align: center;
				border-radius: 20rpx;
				font-size: 24rpx;
				color: white;
			}
		}

		.list {
			width: 100%;
			height: 380rpx;
			margin-top: 20rpx;
			overflow-x: scroll;

			.listBox {
				height: 100%;
				display: flex;

				.loadingBox {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.list-item {
					width: 200rpx;
					height: 380rpx;
					margin-left: 20rpx;
					flex-shrink: 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-evenly;

					.img {
						width: 150rpx;
						height: 170rpx;
						background-size: contain;
						background-position: center;
						background-repeat: no-repeat;
						position: relative;

						.tag {
							width: 30rpx;
							height: 30rpx;
							color: white;
							position: absolute;
							text-align: center;
							font-size: 24rpx;
							line-height: 30rpx;
							left: -10rpx;
							top: -10rpx;
							background-color: #B9B9B9;
							border-radius: 4rpx;
						}

						.firstMonth {
							width: 90rpx;
							height: 30rpx;
							background-color: #fc634f;
							position: absolute;
							right: -20rpx;
							top: -10rpx;
							font-size: 20rpx;
							border-radius: 6rpx;
							color: white;
							text-align: center;
						}
					}

					.title {
						width: 100%;
						text-align: center;
					}

					.new-price {
						color: #F26662;
						font-weight: bold;
						font-size: 28rpx;
					}

					.old-price {
						font-size: 26rpx;
						text-decoration: line-through;
						color: #999;
					}
				}
			}
		}
	}
</style>